import React, { useMemo , memo} from 'react' ;
import PropTypes from "prop-types";
import classnames  from 'classnames';
import dayjs  from 'dayjs'
import 'dayjs/locale/zh-cn';
import './Nav.css';

const Nav = memo ( (props)=>{
    const {
        date,
        prev,
        next,
        isPrevDisabled,
        isNextDisabled,
    } = props;

    const currentString = useMemo(()=>{
        const  d = dayjs(date);
        return  d.format('M月D日 ') + d.locale('zh-cn').format('ddd');
    },[date])

    return  (
        <div  className="nav">
            <span
                onClick={prev}
                className={classnames('nav-prev',{
                    'nav-disabled': isPrevDisabled,
                })}
            >
                前一天
            </span>
            <span  className="nav-current">{currentString} </span>
            <span
                onClick={next}
                className={classnames('nav-next',{
                    'nav-disabled': isNextDisabled,
                })}
            >
                后一天
            </span>
        </div>
    )
});

export  default  Nav;

Nav.propTypes = {
    date : PropTypes.number.isRequired,
    prev : PropTypes.func.isRequired,
    next : PropTypes.func.isRequired,
    isPrevDisabled : PropTypes.bool.isRequired,
    isNextDisabled : PropTypes.bool.isRequired,
}